<ng-template #modalTemplate>
  <div
    [style.visibility]="isShowView ? 'visible' : 'hidden'"
    class="lv-modal"
    cdkDrag
    cdkDragRootElement=".lv-modal-panel"
    cdkDragBoundary=".cdk-global-overlay-wrapper"
    [cdkDragDisabled]="disabledDragging()"
    [class]="lvClass"
    [ngClass]="[
      isAnimating ? 'lv-modal-perserve' : '',
      lvType === modalTypeEnum.DIALOG ? 'lv-modal-dialog' : '',
      lvType === modalTypeEnum.DRAWER ? 'lv-modal-drawer' : '',
      lvType === modalTypeEnum.POPOVER ? 'lv-modal-popover lv-modal-popover-position-' + lvPopoverPosition : '',
      lvType === modalTypeEnum.DIALOG && !lvContent ? 'lv-modal-dialog-no-content' : '',
      lvDialogIcon ? 'lv-modal-has-icon' : '',
      lvMaskTransparent || !lvModality ? '' : 'lv-modal-mask-no-transparent'
    ]"
    [@showModal]="_animationState"
    (@showModal.start)="onAnimationStart($event)"
    (@showModal.done)="onAnimationDone($event)"
  >
    <div *ngIf="isShowView" class="lv-modal-header" [class.lv-modal-no-header]="isNoHeader" cdkDragHandle [ngClass]="{ 'lv-modal-header-drag': !disabledDragging() }">
      <span #modalCloseBtn *ngIf="lvCloseButtonDisplay" class="btn-close">
        <button id="lvModalCloseButton" lv-button (click)="close({ trigger: 'close' })"><i lv-icon="lv-icon-close"></i></button>
      </span>

      <ng-container *ngIf="lvHeader !== null" [ngSwitch]="true">
        <ng-container *ngSwitchCase="typeUtils.isTemplateRef(lvHeader)" [ngTemplateOutlet]="lvHeader"></ng-container>
        <ng-container *ngSwitchCase="typeUtils.isRealString(lvHeader)">
          <div #modalTitle class="lv-modal-title">
            <i lv-icon="{{ lvDialogIcon }}" *ngIf="typeUtils.isRealString(lvDialogIcon)"></i>
            <span class="lv-modal-title-info" lv-overflow>{{ lvHeader }}</span>
          </div>
        </ng-container>
      </ng-container>
    </div>

    <!-- Modal body -->
    <div
      class="lv-modal-body"
      [ngClass]="{
        'lv-modal-drawer-body': lvType === modalTypeEnum.DRAWER && (lvDrawerPosition === 'left' || lvDrawerPosition === 'right'),
        'lv-modal-no-header': isNoHeader,
        'lv-modal-no-footer': isNoFooter,
        'lv-modal-no-close-button': !lvCloseButtonDisplay
      }"
      [style.height]="
        (lvType === modalTypeEnum.DRAWER && (lvDrawerPosition === 'left' || lvDrawerPosition === 'right')) || lvHeight != 'auto'
          ? '0'
          : 'auto'
      "
    >
      <div #modalContent class="lv-modal-content">
        <ng-container *ngIf="!typeUtils.isComponent(lvContent)" [ngSwitch]="true">
          <ng-container *ngSwitchCase="typeUtils.isTemplateRef(lvContent)" [ngTemplateOutlet]="lvContent"></ng-container>
          <ng-container *ngSwitchCase="typeUtils.isRealString(lvContent)">{{ lvContent }}</ng-container>
          <ng-container *ngSwitchDefault>
            <ng-content></ng-content>
          </ng-container>
        </ng-container>
      </div>
    </div>

    <!-- Modal footer -->
    <div *ngIf="isShowView" class="lv-modal-footer">
      <ng-container *ngIf="lvFooter !== null" [ngSwitch]="true">
        <ng-container *ngSwitchCase="typeUtils.isTemplateRef(lvFooter)" [ngTemplateOutlet]="lvFooter"></ng-container>
        <ng-container *ngSwitchCase="isModalButton(lvFooter)">
          <div class="lv-modal-btns">
            <ng-container *ngFor="let button of footerButtons">
              <lv-tooltip [lvContent]="button.tips" class="lv-modal-btn-item" [ngStyle]="{ display: button.visible ? '' : 'none' }">
                <button
                  lv-button
                  (click)="modalButtonClick(button)"
                  [attr.id]="'ct_' + button.id"
                  [disabled]="button.disabled"
                  [lvLoading]="button.loading"
                  [lvSize]="button.size"
                  [lvType]="button.type"
                  [lvDanger]="button.danger"
                  [lvLoadingText]="button.loadingText"
                >
                  {{ button.label }}
                </button>
              </lv-tooltip>
            </ng-container>
          </div>
        </ng-container>
        <ng-container *ngSwitchDefault>
          <div class="lv-modal-btns lv-modal-btns-default">
            <lv-tooltip [lvContent]="lvOkTips" *ngIf="lvOkText !== null" class="lv-modal-btn-item">
              <button
                id="lvModalOkButton"
                lv-button
                [lvType]="lvOkType"
                (click)="presetButtonClick('ok')"
                [lvLoading]="lvOkLoading"
                [disabled]="lvOkDisabled"
                [lvLoadingText]="lvOkLoadingText"
              >
                {{ lvOkText }}
              </button>
            </lv-tooltip>

            <lv-tooltip [lvContent]="lvCancelTips" *ngIf="lvCancelText !== null" class="lv-modal-btn-item">
              <button
                id="lvModalCancelButton"
                lv-button
                [lvType]="lvCancelType"
                (click)="presetButtonClick('cancel')"
                [lvLoading]="lvCancelLoading"
                [disabled]="lvCancelDisabled"
                [lvLoadingText]="lvCancelLoadingText"
              >
                {{ lvCancelText }}
              </button>
            </lv-tooltip>
          </div>
        </ng-container>
      </ng-container>
    </div>
  </div>

  <!-- 拖拽标识 -->
  <div
    #resizeHandle
    *ngIf="lvType === modalTypeEnum.DRAWER && lvResize"
    [ngClass]="{
      'lv-resize-handle': true,
      'lv-resize-handle-horizontal-right': lvDrawerPosition === 'right',
      'lv-resize-handle-horizontal-left': lvDrawerPosition === 'left',
      'lv-resize-handle-vertical-top': lvDrawerPosition === 'top',
      'lv-resize-handle-vertical-bottom': lvDrawerPosition === 'bottom'
    }"
  ></div>
</ng-template>
